<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
    <link rel="stylesheet" type="text/css" href="../css/toupiaoxiangqing.css" />
    <title>投票详情</title>
</head>
<body>
    <div class="ale active hide" id="rule">
        <!-- <div class="fixed" tapmode="hover" onclick="fnClose()" class="top"></div>
        <div class="screen flex-vertical">
            <div class="title">
                <div class="rule">投票规则</div>
                <div class="close"></div>
            </div>
            <div class="content flex-item-vertical">
                <div class="one">
                    <div class="til"><span class="num">1</span>投票时间</div>
                    <div class="message">2017年8月1日至2017年10月31日</div>
                </div>
                <div class="one">
                    <div class="til"><span class="num">2</span>具体内容</div>
                    <div class="message">关注“中国农业银行”微信公众号，在首页进入
                    投票详情页面，选择你想支持的选手进行投票
                    在投票期间，每天都可以为自己喜欢的选手投
                    一票</div>
                </div>
                <div class="one">
                    <div class="til"><span class="num">3</span>温馨提示</div>
                    <div class="message">
                        <p>1、投票只能投一位选手，不能多投</p>
                        <p>2、投票期间，每天都可以投一票</p>
                    </div>
                </div>
                <div class="one">
                    <div class="til"><span class="num">4</span>投票细则</div>
                    <div class="message">
                        <p>1、投票只能投一位选手，不能多投</p>
                        <p>1、投票只能投一位选手，不能多投</p>
                        <p>2、投票期间，每天都可以投一票</p>
                    </div>
                </div>
            </div>
        </div> -->
    </div>
    <!-- 规则模板 begin -->
    <script type="text/html" id="rule-template">
        <div class="fixed"  class="top"></div>
        <div class="screen flex-vertical">
            <div class="title">
                <div class="rule">投票规则</div>
                <div class="close" onclick="fnCloseRule()"></div>
            </div>
            <div class="content flex-item-vertical">
				{{each}}
                <div class="one">
                    <div class="til"><span class="num">{{$index+1}}</span>{{$value.title}}</div>
                    <div class="message">{{$value.content}}</div>
                </div>
				{{/each}}
            </div>
        </div>
    </script>
    <!-- 规则模板 end -->

    <div class="new voteList" id="detail">
        <!-- <div class="content" id="voteList">
            <div class="con">
                <div class="item-vote">
                    <div class="act-photo"></div>
                    <div class="act-message">
                        <div class="act-title">
                            <div class="name">航空旅程5折抢兑</div>
                            <span class="time">2017年8月1日</span>
                        </div>
                        <div class="act-mess">
                            本活动仅限收到我行邀请短信的主卡持卡人参加活动，活动期间不能随意更换卡种，不能使用不能使用不能使用不能使用不能使用
                            <span class="rule" tapmode="hover" onclick="fnEmpty()">查看投票规则>></span>      
                        </div>
                    </div>
                </div>
                <div class="vote-box">
                    <div class="vote-item left">31245参与投票</div>
                    <div class="vote-item center">784人围观</div>
                    <div class="vote-item right">人气王张三</div>
                </div>
            </div>
        </div>  -->
    </div>
    <!-- 投票活动信息模板 begin -->
    <script type="text/html" id="detail-template">
        <div class="content" id="voteList">
            <div class="con">
                <div class="item-vote">
                    {{if picture}}
                        <div class="act-photo" style="background-image: url({{picture}});"></div>
                    {{/if}}
                    <div class="act-message">
                        <div class="act-title">
                            <div class="name">{{title}}</div>
                            <span class="time">{{time_start.split(' ')[0]}}</span>
                        </div>
                        <div class="act-mess">
                            {{brief.substring(0,20)}}...
                            <span class="rule" tapmode="hover" onclick="fnRule()">查看投票规则>></span>      
                        </div>
                    </div>
                </div>
                <div class="vote-box">
                    <div class="vote-item left">{{quantity}}参与投票</div>
                    <div class="vote-item center">{{browse}}人围观</div>
                    <div class="vote-item right">人气王{{popular}}</div>
                </div>
            </div>
        </div> 
    </script>
    <!-- 投票活动信息模板 end -->
    <div class="main">
        <div class="title">请对参与该活动成员进行投票</div>
        <ul id="list">
            <!-- <li>
                <div class="photo"></div>
                <div class="message">
                    <div class="name">LISA月</div>
                    <div class="progress"><div class="speed"></div></div>
                </div>
                <div class="vote">
                    <div class="ticket">已有522票</div>
                    <div class="vote-throw"><div class="throw">投票</div></div>
                </div>
            </li>
            <li>
                <div class="photo"></div>
                <div class="message">
                    <div class="name">LISA月</div>
                    <div class="progress"><div class="speed"></div></div>
                </div>
                <div class="vote">
                    <div class="ticket">已有522票</div>
                    <div class="vote-throw"><div class="throw">投票</div></div>
                </div>
            </li>
            <li>
                <div class="photo"></div>
                <div class="message">
                    <div class="name">LISA月</div>
                    <div class="progress"><div class="speed"></div></div>
                </div>
                <div class="vote active">
                    <div class="ticket">已有522票</div>
                    <div class="vote-throw"><div class="throw">已投</div></div>
                </div>
            </li> -->
        </ul>
        <!-- 列表模板 begin -->
        <script type="text/html" id="list-template">
            {{each}}
                <li>
                    {{if $value.picture}}
                        <div class="photo"  style="background-image: url({{$value.picture}});"></div>
                    {{else}}
                        <div class="photo"></div>
                    {{/if}}
                    
                    <div class="message">
                        <div class="name">{{$value.username}}</div>
                        <div class="progress"><div class="speed" style="width: {{$value.percent || 0}}%"></div></div>
                    </div>
                    <div class="vote" onclick="fnVote(this)" data-id="{{$value.id}}">
                        <div class="ticket">已有{{$value.vote_num}}票</div>
                        <div class="vote-throw"><div class="throw">投票</div></div>
                    </div>
                </li>
            {{/each}}
        </script>
        <!-- 列表模板 end -->
    </div>
</body>
<script type="text/javascript" src="../framework/template-web.js"></script>
<script type="text/javascript" src="../script/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="../script/base.js"></script>
<script type="text/javascript">
    fnDetails();
    function fnDetails(){
        //活动详情
        fnAjax({
            url: "Vote/detail",
            data: fnGetUrlParam(),
        }, function(ret){
            if( !ret.status ){
                if(ret.data){
                    fnValue('#detail',template('detail-template',ret.data));
                    fnValue('#rule',template('rule-template',ret.data.rule));
                }
            }else{
                
            }
        });

        //列表
        fnAjax({
            url: "Vote/voters",
            data: fnGetUrlParam(),
        }, function(ret){
            if( !ret.status ){
                if(ret.data){
                    $.each(ret.data.list,function(_index,_item){
                        var percent = _item.vote_num/ret.data.sum*100;
                        _item.percent = percent;

                    })
                    fnValue('#list',template('list-template',ret.data.list));
                }
            }else{
                
            }
        });
    }
    
    //投票
    function fnVote(_el){
        fnAjax({
            url: "Vote/voteFor",
            data: {
                id: $(_el).attr('data-id'),
                vote_id: fnGetUrlParam('id')
            }
        }, function(ret){
            if( !ret.status ){
                fnToast(ret.msg);
                fnDetails();
            }else{
                fnToast(ret.msg);
            }
        });
    }

    function fnRule(){
        $('.ale').removeClass('hide');
    }

    function fnCloseRule(){
        $('.ale').addClass('hide');
    }
</script>
</html>
